<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/template.css">
</head>
<body>
<!--管理网站统一的头部和尾部-->

<!--顶部 B -->
<div class="top">
    <div class="center top_c">
        你好，欢迎来到美食美刻网！
    </div>
</div>
<!--顶部 E -->

<!--logo B -->
<div class="logo">
    <div class="center l_c">
        <div class="l_left fl">
            <h1>
                <a href="#">美食美刻</a>
            </h1>
        </div>
        <div class="l_center fl">
            <input type="text" class="txt fl" placeholder="请输入菜谱，食材，菜单">
            <input type="button" class="btn fr" value="搜索">
        </div>
        <div class="l_right fr">
            <ul>
                <li><a href="#"><b class="jlt1"></b>QQ注册</a></li>
                <li><a href="#"><b class="jlt2"></b>微博登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#"><input type="button" value="登录"></a></li>
            </ul>
        </div>
    </div>
</div>
<!--Logo E-->

<!--内容 B-->
<div class="main center">
    <!--左侧-->
    <div class="m_left fl">

    </div>
    <!--右侧-->
    <div class="m_right fr">
        <div class="div1">美食美刻</div>
        <div>
            <input type="text" class="txt p_l" placeholder="请输入昵称">
            <input type="password" class="btn p_l" placeholder="密码">
        </div>
        <div class="remember">
            <span class="fl"><input type="checkbox">自动登录</span>
            <a href="#" class="fr">忘记密码？</a>
        </div>
        <div>
            <input type="button" class="loginBtn" value="登&nbsp;&nbsp;&nbsp;&nbsp;录">
        </div>
        <p class="other">
            其他方式
        </p>
        <ul class="login_type">
            <li class="fl"><a href="#">QQ登录</a></li>
            <li class="fl l_t_c"><a href="#">微博登录</a></li>
            <li class="fr"><a href="#">邮箱注册</a></li>
        </ul>
    </div>
</div>
<!--内容 E -->

<!--底部 B -->
<div class="foot">
    <div class="f_border">
        <div>
            <b class="b1"></b>
            <b class="b2"></b>
            <b class="b3"></b>
            <b class="b4"></b>
        </div>
        <div class="center">
            <div class="f_left fl">
                <ul>
                    <li>中国，最大的菜谱库 <span class="fz14"><span class="cRed">800,000</span> 篇</span></li>
                    <li>每月，用户访问数量 <span class="fz14"><span class="cRed">20,000,000</span> 次</span></li>
                    <li>每年，菜谱被浏览量 <span class="fz14"><span class="cRed">36,000,000,000</span>次</span> </li>
                    <li>现在，这些数字还在不断的增长，欢迎您来使用美食美刻</li>
                </ul>
            </div>
            <div class="f_right fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/wb.png" alt="">
                            <span>点击进入<br/>爱美食官网</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/qqkj.jpg" alt="">
                            <span>点击进入<br/>爱美食官网</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/erweima.png" alt="">
                            <span>点击进入<br/>爱美食官网</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/erweima.png" alt="">
                            <span>点击进入<br/>爱美食官网</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--底部 E -->
</body>
</html>